<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS页面布局技术流概览</title>
    <link rel="stylesheet" href="../style/normalize.css">
    <link rel="stylesheet" href="layout_one.css">
</head>
<body>
    <h1>正常布局流</h1>
    <div class="wrapper">
        <div class="layout1">
        <p>段落1</p>
        <ul>
            <li><span>无序</span><span>列表</span></li>
            <li>无序列表</li>
        </ul>

        <p>段落2</p>
        <ul>
            <li>有序列表</li>
            <li>有序列表</li>
        </ul>
        </div>
    </div>
    <h1>display属性</h1>
    <div class="wrapper">
        <div class="layout2">
        <p>段落1</p>
        <ul>
            <li><span>无序</span><span>列表</span></li>
            <li>无序列表</li>
        </ul>

        <p>段落2</p>
        <ul>
            <li>有序列表</li>
            <li>有序列表</li>
        </ul>
        </div>
    </div>
    <h1>弹性盒子</h1>
    <div class="wrapper">
        <div class="layout3">
        <div class="box1">弹性盒子1</div>
        <div class="box2">弹性盒子2</div>
        <div class="box3">弹性盒子3</div>
        </div>
        <div class="layout3">
            <div class="box1">弹性盒子1</div>
            <div class="box2">弹性盒子2</div>
            <div class="box3">弹性盒子3</div>
    </div>
    </div>
    <h1>网格</h1>
    <div class="wrapper">
        <div class="layout4">
        <div class="box1">网格单元1</div>
        <div class="box2">网格单元2</div>
        <div class="box3">网格单元3</div>
        <div class="box4">网格单元4</div>
        <div class="box5">网格单元5</div>
        <div class="box6">网格单元6</div>
     </div>
    </div>
    <br>
    <div class="wrapper">
        <div class="layout5">
        <div class="box1">网格单元1</div>
        <div class="box2">网格单元2</div>
        <div class="box3">网格单元3</div>
        </div>
    </div>

 <h1>浮动</h1>
 <div class="wrapper">
    <div class="layout6">
    <div class="box1">浮动单元1</div>
    <div class="box2">浮动单元2</div>
    <div class="box3">浮动单元3</div>
    </div>
</div>

<h1>定位</h1>
 <div class="wrapper">
    <div class="layout7">
    <div class="box1">定位单元1</div>
    <div class="box2">定位单元2</div>
    <div class="box3">定位单元3</div>
    </div>
</div>
<h1>CSS表格布局</h1>
<div class="wrapper">
    <div class="layout8">
        <form action="">
            <p>表单标题(表格标题)
                <div>
                    <label for="username">用户名</label>
                    <input type="text"  id="username">
                </div>
                <div>
                    <label for="pwd">密码</label>
                    <input type="password"  id="pwd">
                </div>
            </p>
        </form>
    </div>
</div>

<h1>多列布局</h1>
<div class="wrapper">
    <div class="layout9">
        <p>内容1</p>
        <p>内容2</p>
    </div>
</div>

    <br><br><br><br><br><br><br><br><br>
</body>
</html>